<style>
    .checkRoom {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 10px;
        overflow-y: auto;
    }
    .checkRoom .box {
        width: 150px;
        height: 50px;
        line-height: 30px;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1px solid #e8e8e8;
        cursor: pointer;
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
        margin-bottom: 10px;
        transition: all .3s linear;
        position: relative;
    }
    .checkRoom .box:hover {
        box-shadow: 0 0 7px rgba(0,0,0,.15);
    }
    .checkRoom .box:active {
        background-color: #e8e8e8;
    }
    .checkRoom .box span {
        font-size: 12px;
        color: #F56C6C;
        position: absolute;
        right: 10px;
    }
    .checkRoom .tables {
        width: 1020px;
        margin: 0 auto;
    }
    .checkRoom .tables .undone {
        width: 500px;
        margin-right: 10px;
        display: inline-block;
        vertical-align: top;
    }
    .checkRoom .tables .done {
        width: 500px;
        display: inline-block;
        vertical-align: top;
    }
</style>

<body>
<div class="checkRoom">
    <el-divider content-position="left">
        {{ showAllProject ? '检查项目列表' : '当前检查项目' }}
    </el-divider>
    <template v-if="showAllProject">
        <div :class="['box']" @click="handleChangeProject(index)"
             v-for="(item, index) in projectList" :key="index" >
            {{ item.name }}
            <span v-if="item.limited">已限号</span>
        </div>
    </template>
    <template v-else>
        <div class="box" :style="{ color: (disable ? '#F56C6C' : '#67C23A') }">
            <i class="el-icon-finished" style="font-size: 20px; margin-right: 10px;"></i>
            {{ projectList[currentProjectIndex].name }}
        </div>
        <el-button type="primary" icon="el-icon-s-help" size="small" @click="showAllProject = true">展开全部项目</el-button>
        <el-button type="danger" icon="el-icon-video-pause" size="small" v-if="!disable" @click="handleDisable">开启限号</el-button>
        <el-button type="success" icon="el-icon-video-play" size="small" v-else @click="handleOpen">解除限号</el-button>
    </template>

    <el-divider content-position="left">
        {{ projectList[currentProjectIndex] ? projectList[currentProjectIndex].name + '人员信息' : '人员信息' }}
    </el-divider>
    <div v-if="!projectList[currentProjectIndex]" style="font-size: 14px;">
        请选择检查列表
    </div>
    <div class="tables" v-if="currentProjectIndex != null">
        <el-table :data="patList.undone" border class="undone">
            <el-table-column label="正在排队人员" align="center">
                <el-table-column
                        prop="seq"
                        align="center"
                        label="排序号"/>
                <el-table-column
                        prop="patientName"
                        align="center"
                        label="姓名"/>
                <el-table-column
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleFinishCheck(scope.row)">完成检查</el-button>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <el-table :data="patList.done" border class="done">
            <el-table-column label="已完成人员" align="center">
                <el-table-column
                        prop="seq"
                        align="center"
                        label="排序号"/>
                <el-table-column
                        prop="patientName"
                        align="center"
                        label="姓名"/>
            </el-table-column>
        </el-table>
    </div>


</div>
</body>

<script>
    require([
        'jquery',
        'bbcare'
    ], function($, $bb) {

        var URL = $bb.baseUrl('followup')

        var vm = new Vue({
            el: '.checkRoom',
            data: {
                projectList: [],
                currentProjectIndex: null,
                showAllProject: true,
                patList: {
                    done: [],
                    undone: []
                },
                queueId: '',
                disable: false
            },
            created: function () {
                this.getProjectList()
            },
            watch: {
                'currentProjectIndex': function (num) {
                    var queueId = this.projectList[num].id
                    this.queueId = queueId
                    this.getPatList(queueId)
                },
                showAllProject: function (val) {
                    if (!val) return
                    this.getProjectList()
                }
            },
            methods: {
                /**
                 * 暂停分诊
                 */
                handleDisable: function () {
                    var that = this
                    $bb.ajax({
                        url: URL + 'followup/queuing/office2/limit?queue_id=' + this.queueId,
                        methods: 'POST',
                        success: function (res) {
                            if (typeof res === 'boolean') {
                                that.disable = true
                                that.$message.success('开始限号')
                            } else {
                                that.$message.error(res.msg)
                            }
                        }
                    })
                },
                /**
                 * 开启分诊
                 */
                handleOpen: function () {
                    var that = this
                    $bb.ajax({
                        url: URL + 'followup/queuing/office2/unlimit?queue_id=' + this.queueId,
                        methods: 'POST',
                        success: function (res) {
                            if (res) {
                                that.disable = false
                                that.$message.success('关闭限号')
                            }
                        }
                    })
                },
                /**
                 * 选择当前项目
                 * @param { number } index
                 */
                handleChangeProject: function (index) {
                    this.showAllProject = false
                    this.currentProjectIndex = index
                    this.disable = this.projectList[index].limited
                },
                /**
                 * 点击完成检查
                 */
                handleFinishCheck: function (row) {
                    var that = this
                    this.$confirm('确认该患者完成问诊？', '提示', {
                        type: 'success',
                        confirmButtonText: '确认完成',
                        cancelButtonText: '未完成',
                    }).then(function () {
                        that.patientDone(row.seq, that)
                    }).catch(function () {})
                },
                /**
                 * 患者完成问诊
                 * @param { number } seq
                 */
                patientDone: function (seq, that) {
                    $bb.ajax({
                        url: URL + 'followup/queuing/office2/done?seq=' + seq ,
                        methods: 'POST',
                        success: function (res) {
                            that.getPatList(that.queueId)
                        }
                    })
                },
                /**
                 * 获取检查项目的列表
                 */
                getProjectList: function () {
                    var that = this
                    $bb.ajax({
                        url: URL + 'followup/queuing/office2/q',
                        methods: 'POST',
                        success: function (res) {
                            that.projectList = res
                        }
                    })
                },
                /**
                 *
                 */
                getPatList: function (id) {
                    var that = this
                    $bb.ajax({
                        url: URL + 'followup/queuing/office2/pat?queue_id=' + id,
                        methods: 'POST',
                        success: function (res) {
                            that.patList.done = res.done
                            that.patList.undone = res.undone
                        }
                    })
                }
            }
        })


    });
</script>